  html,body{
			padding: 0;
			margin: 0;
			background: #000;
			width: 1920px;
			height: 1080px;
	}
	.box{
		position: absolute;
		left: 800px;	
		top: 400px;
		-webkit-perspective: 600px;
		-ms-perspective: 600px;
	}
	.reset{
	width: 260px;
  height: 260px;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-name: rotationMainContainer1;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: paused;
  cursor: pointer;
	}
	.wharf{
		width: 260px;
	  height: 260px;
	  text-align: center;
	  -webkit-transform-style: preserve-3d;
	  -webkit-animation-play-state: paused;
  -webkit-animation-name: wharf;
	  cursor: pointer;
	  -webkit-transform: rotateX(-23deg) rotateY(-3deg) rotateZ(0deg);
	  /*-webkit-transform:rotate3d(90deg,0deg,-100deg);*/
		/*-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(10deg);*/
	}
	@-webkit-keyframes wharf{
		0%{
			-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		100%{
			-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		}
	}
	
	.yard{
		width: 260px;
	  height: 260px;
	  text-align: center;
	  -webkit-transform-style: preserve-3d;
	  -webkit-animation-play-state: paused;
  	-webkit-animation-name: yard;
	  cursor: pointer;
	  -webkit-transform:rotateX(-35deg) rotateY(-92deg) rotateZ(-11deg);
	  /*-webkit-transform:rotate3d(90deg,0deg,-100deg);*/
		/*-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(10deg);*/
	}
	@-webkit-keyframes yard{
		0%{
			-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		100%{
			-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		}
	}
	.wharehouse {
		width: 260px;
	  height: 260px;
	  text-align: center;
	  -webkit-transform-style: preserve-3d;
	  -webkit-animation-play-state: paused;
  	-webkit-animation-name: wharehouse ;
	  cursor: pointer;
	-webkit-transform:rotateX(-115deg) rotateY(0deg) rotateZ(0deg)

	  
	  /*-webkit-transform:rotate3d(90deg,0deg,-100deg);*/
		/*-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(10deg);*/
	}
	@-webkit-keyframes wharehouse {
		0%{
			-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		100%{
			-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		}
	}

	.stop{
	width: 260px;
  height: 260px;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-play-state: paused;
  cursor: pointer;
  -webkit-transform:rotate3d(90deg,0deg,-100deg);
	-webkit-transform: rotateX(-35deg) rotateY(-45deg) rotateZ(0deg);
	}
	@-webkit-keyframes rotationMainContainer1{
		0%{
			-webkit-transform: rotateX(-35deg) rotateY(-45deg) rotateZ(0deg);
		}
		100%{
			-webkit-transform: rotateX(-35deg) rotateY(-45deg) rotateZ(0deg);
		}
	}
.cube{
  width: 260px;
  height: 260px;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  /*-webkit-transform:rotate3d(90deg,0deg,-100deg);*/
  /*-webkit-transform: rotateY(0deg) translateZ(-200px);*/
  -webkit-animation-name: rotationMainContainer;
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  cursor: pointer;
}
/*.cube:hover{
	-webkit-transform: rotateX(-35deg) rotateY(-50deg) rotateZ(0deg);
			animation-play-state:paused;   
			
		}*/
.cube-face{
  width: 260px;
  height: 260px;
  font-size: 28px;
	font-weight: bold;
  position: absolute;
  opacity: .95;
  border-radius: 5px;
  border: 3px solid rgba(54, 226, 248, 0.5);
  box-shadow: 1px 1px 100px rgba(0,11, 254, .5);
  -webkit-transform-origin: 50% 50% 50%;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
}

.cube-face-front{
	background: url(../img/mt.jpg) no-repeat;
	background-size: 100% 100%;
  -webkit-transform: translateZ(130px);
  -webkit-animation-name: bgCAFace;
}

.cube-face-left{
	background: url(../img/hg.jpg) no-repeat;
	background-size: 100% 100%;
  -webkit-transform: rotateY(90deg) translateZ(130px);
  -webkit-animation-name: bgCALeft;
}

.cube-face-back{	
	background: url(../img/mt.jpg) no-repeat;
	background-size: 100% 100%;
  -webkit-transform: translateZ(-130px);
  -webkit-animation-name: bgCABack;
}

.cube-face-right{
	background: url(../img/gk.jpg) no-repeat;
	background-size: 100% 100%;
  -webkit-transform: rotateY(90deg) translateZ(-130px);
  -webkit-animation-name: bgCARight;
}

.cube-face-top{
	background: url(../img/ck.jpg) no-repeat;
	background-size: 100% 100%;
  -webkit-transform: rotateX(90deg) translateZ(-130px);
  -webkit-animation-name: bgCATopBottom;
}

.cube-face-bottom{
	background: url(../img/ck.jpg) no-repeat;
	background-size: 100% 100%;
  -webkit-transform: rotateX(90deg) translateZ(130px);
  -webkit-animation-name: bgCATopBottom;
}

@-webkit-keyframes rotationMainContainer{
  0% { 
  	-webkit-transform: rotateX(-35deg) rotateY(-45deg) rotateZ(0deg);
  }
  50%{
   	-webkit-transform: rotateX(145deg) rotateY(135deg) rotateZ(180deg);
  }
  100%{ 
  		-webkit-transform: rotateX(325deg) rotateY(315deg) rotateZ(360deg);
  }
}
